<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - omDroppable</title>

		<style type="text/css">
			#index {
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	padding: 8px;
}

#content {
	margin-left: 190px;
	margin-right: 5px;
}

.classTitle {
    font-size: 32px;
    line-height: 130%;
    padding-top: 10px;
}

.detailList {
	line-height: 15px;
	margin-left: 20px;
}

.detailList dt {
	margin-left: 20px;
}

.detailList .heading {
	font-weight: bold;
	margin-left: 0;
	padding-bottom: 6px;
}

.fineprint {
	text-align: right;
	font-size: 10px;
}

		</style>
		<link type="text/css" rel="stylesheet" href="../css/docs.css">
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/om-core.js"></script>
		<script type="text/javascript" src="../js/om-panel.js"></script>
		<script type="text/javascript" src="../js/om-tabs.js"></script>
		<link type="text/css" rel="stylesheet" href="../css/om-core.css">
		<link type="text/css" rel="stylesheet" href="../css/om-theme.css">
		<link type="text/css" rel="stylesheet" href="../css/om-panel.css">
		<link type="text/css" rel="stylesheet" href="../css/om-tabs.css">
		<script type="text/javascript">
            $(function() {
            	$(".widget-docs").omTabs();
            	<!-- doc_script_begin -->
                $(".widget-docs > div").addClass('clearfix'); //This fixes clearing of containers
                //show details/hide details
                $("#options #options-list, #events #events-list").before('<div class="toggle-docs-links"><a class="toggle-docs-detail" href="#">显示描述</a> | <a class="toggle-docs-example" href="#">隐藏示例</a></div>');
            
                $("#methods #methods-list").before('<div class="toggle-docs-links"><a class="toggle-docs-detail" href="#">显示描述</a> | <a class="toggle-docs-example" href="#">隐藏示例</a></div>');

                var showExamples = true;
                $(".toggle-docs-detail").toggle(function(e){
                    var details = $(this).text("隐藏描述")
                        .parent().next().find("li > div:first-child").addClass("header-open");
                    if ( showExamples ) {
                        details.nextAll().show();
                    } else {
                        details.next().show();
                    }
                    e.preventDefault();
                },function(e){
                    $(this).text("显示描述")
                        .parent().next().find("li > div:first-child").removeClass("header-open")
                        .nextAll().hide();
                    e.preventDefault();
                });
            
                $(".toggle-docs-example").click(function(e){
                    if ( showExamples ) {
                        showExamples = false;
                        $(".toggle-docs-example").text("显示示例").parent().next().find("div.header-open ~ .option-examples, div.header-open ~ .event-examples, div.header-open ~ .method-examples").hide();
                    } else {
                        showExamples = true;
                        $(".toggle-docs-example").text("隐藏示例").parent().next().find("div.header-open ~ .option-examples, div.header-open ~ .event-examples, div.header-open ~ .method-examples").show();
                    }
                    e.preventDefault();
                });
                
                //Initially hide all options/methods/events
                $('div.option-description, div.option-examples, div.event-description, div.event-examples, div.method-description, div.method-examples').hide();
                
                //Make list items collapsible
                $('div.option-header h3, div.event-header h3, div.method-header h3').live('click', function() {
                    var details = $(this).parent().toggleClass('header-open');
                    if ( showExamples ) {
                        details.nextAll().toggle();
                    } else {
                        details.next().toggle();
                    }
                });
            });
            <!-- doc_script_end -->
        </script>
	</head>

	<body>
	<div id="wrapper">
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->
		
<!-- ============================== classes index ============================ -->
        <div id="index">
            <!-- begin publish.classesIndex -->
            <div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2><span style="color:#E87B10">Classes</span></h2>
<table class="layout-grid" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
             <td class="left-nav">
                 <dl class="demos-nav">
                    
                    <dd><i><a href="../symbols/_global_.html">_global_</a></i></dd>
                    
                    <dd><a href="../symbols/omAccordion.html">omAccordion</a></dd>
                    
                    <dd><a href="../symbols/omAjaxSubmit.html">omAjaxSubmit</a></dd>
                    
                    <dd><a href="../symbols/omBorderLayout.html">omBorderLayout</a></dd>
                    
                    <dd><a href="../symbols/omButton.html">omButton</a></dd>
                    
                    <dd><a href="../symbols/omButtonbar.html">omButtonbar</a></dd>
                    
                    <dd><a href="../symbols/omCalendar.html">omCalendar</a></dd>
                    
                    <dd><a href="../symbols/omCombo.html">omCombo</a></dd>
                    
                    <dd><a href="../symbols/omDialog.html">omDialog</a></dd>
                    
                    <dd><a href="../symbols/omDraggable.html">omDraggable</a></dd>
                    
                    <dd><a href="../symbols/omDroppable.html">omDroppable</a></dd>
                    
                    <dd><a href="../symbols/omEditor.html">omEditor</a></dd>
                    
                    <dd><a href="../symbols/omFileUpload.html">omFileUpload</a></dd>
                    
                    <dd><a href="../symbols/omGrid.html">omGrid</a></dd>
                    
                    <dd><a href="../symbols/omItemSelector.html">omItemSelector</a></dd>
                    
                    <dd><a href="../symbols/omMenu.html">omMenu</a></dd>
                    
                    <dd><a href="../symbols/omMessageBox.html">omMessageBox</a></dd>
                    
                    <dd><a href="../symbols/omMessageTip.html">omMessageTip</a></dd>
                    
                    <dd><a href="../symbols/omNumberField.html">omNumberField</a></dd>
                    
                    <dd><a href="../symbols/omPanel.html">omPanel</a></dd>
                    
                    <dd><a href="../symbols/omProgressbar.html">omProgressbar</a></dd>
                    
                    <dd><a href="../symbols/omScrollbar.html">omScrollbar</a></dd>
                    
                    <dd><a href="../symbols/omSlider.html">omSlider</a></dd>
                    
                    <dd><a href="../symbols/omSuggestion.html">omSuggestion</a></dd>
                    
                    <dd><a href="../symbols/omTabs.html">omTabs</a></dd>
                    
                    <dd><a href="../symbols/omTooltip.html">omTooltip</a></dd>
                    
                    <dd><a href="../symbols/omTree.html">omTree</a></dd>
                    
                    <dd><a href="../symbols/validate.html">validate</a></dd>
                    
                 </dl>
             </td>
         </tr>
     </tbody>
</table>
            <!-- end publish.classesIndex -->
        </div>
        
        <div id="content">
<!-- ============================== class title ============================ -->
            <div class="classTitle">
                
                Class omDroppable
            </div>

        <!-- ============================== widget-docs ================================= -->
        <div class="widget-docs">
            <ul>
                <li><a href="#overview">预览</a></li>
                
                    
                    
                        <li><a href="#options">属性</a></li>
                    
                
                
                    
                    
                        <li><a href="#methods">方法</a></li>
                    
                
                
                    
                    
                        <li><a href="#events">事件</a></li>
                    
                
            </ul>
            <!-- doc_overview_begin -->
            <div id="overview" style="margin:14px 8px;">
                
                <p class="description">
                    <!-- ============================== class summary ========================== -->            
                    
                    
                
                    用来提供放置功能。<br/>
<b>特点：</b><br/>
<ol>
		<li>轻量级，简单易用。</li>
		<li>可定义放置元素的范围。</li>
</ol>
<b>示例：</b><br/>
<pre>
&lt;script type="text/javascript" &gt;
$(document).ready(function() {
    $('#selector').omDroppable();
});
&lt;/script&gt;

&lt;div id="selector"&gt;
&lt;/div&gt;
</pre>
                    <!--
                    
                        <br /><i>Defined in: </i> <a href="../symbols/src/ui__om-droppable.js.html">om-droppable.js</a>.
                    
                    -->
                </p>
                    <!-- ============================== class details ==================== -->        
                    
                    <div class="details"><a name="constructor"> </a>
                        <div class="option-name">
                                <b style="color: #1B75BB;">omDroppable</b>(p)
                        </div>
                        
                        <!--
                        <div class="description">
                            构造函数.
                        </div>
                        -->
                        
                        
                            
                                <dl class="detailList">
                                <dt class="heading">参数:</dt>
                                
                                    <dt>
                                         <b>p</b>&nbsp;-
                                        标准config对象：{}
                                        
                                    </dt>
                                        
                                
                                </dl>
                            
                            
                            
                            
                            
                            
                            
        
                    </div>
                    
            </div>
            <!-- doc_overview_end -->
            
            	<!-- doc_options_begin -->
                <div id="options">
                    <!-- ============================== field details ========================== -->        
                    <h2 class="top-header">属性</h2>
                    <div id="options-list">
	                    <ul class="options-list">
	                            
	                            
	                                <li class="option" id="option-accept">
	                                  <div class="option-header">
	                                    <h3 class="option-name"><a href="#" onclick="return false;">accept</a></h3>
	                                    <dl>
	                                      
	                                      <dt class="option-type-label">Type:</dt>
	                                        <dd class="option-type">
	                                        &nbsp;
	                                        <span>Selector，function</span></dd>
	                                      
	                                      
	                                      <dt class="option-default-label">Default:</dt>
	                                        <dd class="option-default">"*"</dd>
	                                      
	                                    </dl>
	                                  </div>
	                                  <div class="option-description">
	                                    <p>
	                                        指定可以接受的拖动元素，默认任意元素都可以被接受。
	                                        
	                                        
	                                        
	                                        <!-- handler the other member -->
	                                        
	                                        
	                                        
	                                    </p>
	                                  </div>
	                                     
	                                      <div class="option-examples">
	                                        <h4>示例：</h4>
	                                        <dl class="option-examples-list">
	                                     
	                                        
	                                        <dd>
	                                        <pre>//只接受id为draggable的元素
$("#selector").omDroppable({accept:"#draggable"});</pre>
	                                        </dd>
	                                        
	                                        </dl>
	                                      </div>
	                                       
	                                </li>
	                            
	                            
	                                <li class="option" id="option-activeClass">
	                                  <div class="option-header">
	                                    <h3 class="option-name"><a href="#" onclick="return false;">activeClass</a></h3>
	                                    <dl>
	                                      
	                                      <dt class="option-type-label">Type:</dt>
	                                        <dd class="option-type">
	                                        &nbsp;
	                                        <span>String</span></dd>
	                                      
	                                      
	                                      <dt class="option-default-label">Default:</dt>
	                                        <dd class="option-default">无</dd>
	                                      
	                                    </dl>
	                                  </div>
	                                  <div class="option-description">
	                                    <p>
	                                        当可接受的元素被拖动时，添加到droppable元素上的样式。
	                                        
	                                        
	                                        
	                                        <!-- handler the other member -->
	                                        
	                                        
	                                        
	                                    </p>
	                                  </div>
	                                     
	                                      <div class="option-examples">
	                                        <h4>示例：</h4>
	                                        <dl class="option-examples-list">
	                                     
	                                        
	                                        <dd>
	                                        <pre>$("#selector").omDroppable({activeClass:"om-state-highlight"});</pre>
	                                        </dd>
	                                        
	                                        </dl>
	                                      </div>
	                                       
	                                </li>
	                            
	                            
	                                <li class="option" id="option-disabled">
	                                  <div class="option-header">
	                                    <h3 class="option-name"><a href="#" onclick="return false;">disabled</a></h3>
	                                    <dl>
	                                      
	                                      <dt class="option-type-label">Type:</dt>
	                                        <dd class="option-type">
	                                        &nbsp;
	                                        <span>Boolean</span></dd>
	                                      
	                                      
	                                      <dt class="option-default-label">Default:</dt>
	                                        <dd class="option-default">false</dd>
	                                      
	                                    </dl>
	                                  </div>
	                                  <div class="option-description">
	                                    <p>
	                                        设置放置功能是否可用。
	                                        
	                                        
	                                        
	                                        <!-- handler the other member -->
	                                        
	                                        
	                                        
	                                    </p>
	                                  </div>
	                                     
	                                      <div class="option-examples">
	                                        <h4>示例：</h4>
	                                        <dl class="option-examples-list">
	                                     
	                                        
	                                        <dd>
	                                        <pre>$("#selector").omDroppable({disabled:true});</pre>
	                                        </dd>
	                                        
	                                        </dl>
	                                      </div>
	                                       
	                                </li>
	                            
	                            
	                                <li class="option" id="option-greedy">
	                                  <div class="option-header">
	                                    <h3 class="option-name"><a href="#" onclick="return false;">greedy</a></h3>
	                                    <dl>
	                                      
	                                      <dt class="option-type-label">Type:</dt>
	                                        <dd class="option-type">
	                                        &nbsp;
	                                        <span>Boolean</span></dd>
	                                      
	                                      
	                                      <dt class="option-default-label">Default:</dt>
	                                        <dd class="option-default">false</dd>
	                                      
	                                    </dl>
	                                  </div>
	                                  <div class="option-description">
	                                    <p>
	                                        指定是否在嵌套的droppable元素中阻止事件传播，默认为false，不阻止事件传播；反正为true时，阻止事件传播。
	                                        
	                                        
	                                        
	                                        <!-- handler the other member -->
	                                        
	                                        
	                                        
	                                    </p>
	                                  </div>
	                                     
	                                      <div class="option-examples">
	                                        <h4>示例：</h4>
	                                        <dl class="option-examples-list">
	                                     
	                                        
	                                        <dd>
	                                        <pre>$("#selector").omDroppable({greedy:true});</pre>
	                                        </dd>
	                                        
	                                        </dl>
	                                      </div>
	                                       
	                                </li>
	                            
	                            
	                                <li class="option" id="option-hoverClass">
	                                  <div class="option-header">
	                                    <h3 class="option-name"><a href="#" onclick="return false;">hoverClass</a></h3>
	                                    <dl>
	                                      
	                                      <dt class="option-type-label">Type:</dt>
	                                        <dd class="option-type">
	                                        &nbsp;
	                                        <span>String</span></dd>
	                                      
	                                      
	                                      <dt class="option-default-label">Default:</dt>
	                                        <dd class="option-default">无</dd>
	                                      
	                                    </dl>
	                                  </div>
	                                  <div class="option-description">
	                                    <p>
	                                        当可接受的元素悬停在droppable元素上时，添加到droppable元素上的样式。
	                                        
	                                        
	                                        
	                                        <!-- handler the other member -->
	                                        
	                                        
	                                        
	                                    </p>
	                                  </div>
	                                     
	                                      <div class="option-examples">
	                                        <h4>示例：</h4>
	                                        <dl class="option-examples-list">
	                                     
	                                        
	                                        <dd>
	                                        <pre>$("#selector").omDroppable({hoverClass:"om-state-hover"});</pre>
	                                        </dd>
	                                        
	                                        </dl>
	                                      </div>
	                                       
	                                </li>
	                            
	                    </ul>
                   </div>
                </div>
                <!-- doc_options_end -->
            
            
            	<!-- doc_methods_begin -->
                <div id="methods">
                    <!-- ============================== methods details ======================== -->
                    <h2 class="top-header">方法</h2>
                    <div id="methods-list">
	                    <ul class="methods-list">
	                        
	                            <li class="method" id="method-destroy">
	                              <div class="method-header">
	                                <h3 class="method-name"><a href="#" onclick="return false;">destroy</a></h3>
	                                <dl>
	                                    <dt class="method-signature-label">Signature:</dt>
	                                    <dd class="method-signature">&nbsp;
	                                        
	                                        <b><a href="../symbols/omDroppable.html#destroy">destroy</a></b>()
	                                    </dd>
	                                </dl>
	                              </div>
	                              <div class="method-description">
	                                <p>
	                                    删除元素的放置功能。
	                                    
	                                    
	    
	                                    <!-- do the other params -->
	                                    
	                                    
	                                    
	                                    
	                                    
	                                        <dl class="detailList">
	                                        <dt class="heading">返回:</dt>
	                                        
	                                            <dd>JQuery对象</dd>
	                                        
	                                        </dl>
	                                    
	                                    
	                                    
	                                </p>
	                              </div>
	                              
	                                  <div class="method-examples">
	                                    <h4>示例：</h4>
	                                    <dl class="method-examples-list">
	                                    
	                                        <dd>
	                                        <pre>var $selector = $("#selector").omDroppable('destroy');</pre>
	                                        </dd>
	                                    
	                                    </dl>
	                                  </div>
	                             
	                        </li>
	                    
	                </ul>
                </div>
            </div>
            <!-- doc_methods_end -->
        
        
          <!-- doc_events_begin -->
          <div id="events">
            <!-- ============================== event details ========================= -->     
            <h2 class="top-header">事件</h2>
            <div id="events-list">
	            <ul class="events-list">
	                
	                    <li class="event" id="event-onDragOut">
	                      <div class="event-header">
	                        <h3 class="event-name"><a href="#" onclick="return false;">onDragOut</a></h3>
	                        <dl>
	                          <dt class="event-type-label"><dt class="event-type"></dt>
	                            
	                            function(source, event)
	                            </dt>
	                        </dl>
	                      </div>
	                      <div class="event-description">
	                        <p>
	                            拖动元素移出可放置位置时触发事件。
	                            
	                            
	                            
	                            <!-- handler the other members -->
	                            
	                                <dl class="detailList">
	                                <dt class="heading">参数:</dt>
	                                
	                                    <dt>
	                                        <b>source</b>&nbsp;-
	                                        被拖动的Dom元素。
	                                        
	                                    </dt>
	                                
	                                    <dt>
	                                        <b>event</b>&nbsp;-
	                                        jQuery.Event对象。
	                                        
	                                    </dt>
	                                
	                                </dl>
	                            
	                            
	                            
	                            
	                            
	                            
	                            
	                        </p>
	                      </div>
	                      
	                      
	                          <div class="event-examples">
	                            <h4>示例</h4>
	                            <dl class="event-examples-list">
	                                
	                                    <dd>
	                                    <pre>  $("#selector").omDroppable({onDragOut : function(source, event) {doSomething...}});</pre>
	                                    </dd>
	                                
	                            </dl>
	                          </div>
	                      
	                    </li>
	                
	                    <li class="event" id="event-onDragOver">
	                      <div class="event-header">
	                        <h3 class="event-name"><a href="#" onclick="return false;">onDragOver</a></h3>
	                        <dl>
	                          <dt class="event-type-label"><dt class="event-type"></dt>
	                            
	                            function(source, event)
	                            </dt>
	                        </dl>
	                      </div>
	                      <div class="event-description">
	                        <p>
	                            拖动元素可以放置时触发事件。
	                            
	                            
	                            
	                            <!-- handler the other members -->
	                            
	                                <dl class="detailList">
	                                <dt class="heading">参数:</dt>
	                                
	                                    <dt>
	                                        <b>source</b>&nbsp;-
	                                        被拖动的Dom元素。
	                                        
	                                    </dt>
	                                
	                                    <dt>
	                                        <b>event</b>&nbsp;-
	                                        jQuery.Event对象。
	                                        
	                                    </dt>
	                                
	                                </dl>
	                            
	                            
	                            
	                            
	                            
	                            
	                            
	                        </p>
	                      </div>
	                      
	                      
	                          <div class="event-examples">
	                            <h4>示例</h4>
	                            <dl class="event-examples-list">
	                                
	                                    <dd>
	                                    <pre>  $("#selector").omDroppable({onDragOver : function(source, event) {doSomething...}});</pre>
	                                    </dd>
	                                
	                            </dl>
	                          </div>
	                      
	                    </li>
	                
	                    <li class="event" id="event-onDragStart">
	                      <div class="event-header">
	                        <h3 class="event-name"><a href="#" onclick="return false;">onDragStart</a></h3>
	                        <dl>
	                          <dt class="event-type-label"><dt class="event-type"></dt>
	                            
	                            function(source, event)
	                            </dt>
	                        </dl>
	                      </div>
	                      <div class="event-description">
	                        <p>
	                            可接受的元素开始拖动时触发事件。
	                            
	                            
	                            
	                            <!-- handler the other members -->
	                            
	                                <dl class="detailList">
	                                <dt class="heading">参数:</dt>
	                                
	                                    <dt>
	                                        <b>source</b>&nbsp;-
	                                        被拖动的Dom元素。
	                                        
	                                    </dt>
	                                
	                                    <dt>
	                                        <b>event</b>&nbsp;-
	                                        jQuery.Event对象。
	                                        
	                                    </dt>
	                                
	                                </dl>
	                            
	                            
	                            
	                            
	                            
	                            
	                            
	                        </p>
	                      </div>
	                      
	                      
	                          <div class="event-examples">
	                            <h4>示例</h4>
	                            <dl class="event-examples-list">
	                                
	                                    <dd>
	                                    <pre>  $("#selector").omDroppable({onDragStart : function(source, event) {doSomething...}});</pre>
	                                    </dd>
	                                
	                            </dl>
	                          </div>
	                      
	                    </li>
	                
	                    <li class="event" id="event-onDrop">
	                      <div class="event-header">
	                        <h3 class="event-name"><a href="#" onclick="return false;">onDrop</a></h3>
	                        <dl>
	                          <dt class="event-type-label"><dt class="event-type"></dt>
	                            
	                            function(source, event)
	                            </dt>
	                        </dl>
	                      </div>
	                      <div class="event-description">
	                        <p>
	                            拖动的元素成功放置时触发事件。
	                            
	                            
	                            
	                            <!-- handler the other members -->
	                            
	                                <dl class="detailList">
	                                <dt class="heading">参数:</dt>
	                                
	                                    <dt>
	                                        <b>source</b>&nbsp;-
	                                        被拖动的Dom元素。
	                                        
	                                    </dt>
	                                
	                                    <dt>
	                                        <b>event</b>&nbsp;-
	                                        jQuery.Event对象。
	                                        
	                                    </dt>
	                                
	                                </dl>
	                            
	                            
	                            
	                            
	                            
	                            
	                            
	                        </p>
	                      </div>
	                      
	                      
	                          <div class="event-examples">
	                            <h4>示例</h4>
	                            <dl class="event-examples-list">
	                                
	                                    <dd>
	                                    <pre>  $("#selector").omDroppable({onDrop : function(source, event) {doSomething...}});</pre>
	                                    </dd>
	                                
	                            </dl>
	                          </div>
	                      
	                    </li>
	                
	            </ul>
            </div>
          </div>
          <!-- doc_events_end -->
       
       
    </div>

<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Wed Feb 06 2013 16:18:10 GMT+0800 (CST)
		</div>
		</div>
	</body>
</html>
